<template>
  <div class="layout">
    <div class="main">
      <div class="nav">
        <mu-tabs :value="activeTab" @change="handleTabChange" class="tab">
          <mu-tab value="recommend" title="个性推荐" to="/recommend"/>
          <mu-tab value="songList" title="歌单" to="/songList"/>
          <mu-tab value="radio" title="主播电台" to="/radio"/>
          <mu-tab value="leaderBoards" title="排行榜" to="/leaderBoards"/>
        </mu-tabs>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  const VALUE = ['recommend', 'songList', 'radio', 'leaderBoards']
  export default{
    data() {
      return {
        activeTab: ''
      }
    },
    methods: {
      handleTabChange (val) {
        this.activeTab = val
        this.setRecommendrouter(val)
      },
      ...mapMutations({
        setRecommendrouter: 'SET_RECOMMENDROUTER'
      })
    },
    created() {
      // 第一次进来的时候默认个性推荐
      let Tab = window.location.href.substring(window.location.href.lastIndexOf('/') + 1, window.location.href.length)
      let next = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
      let nextTab = next.substring(next.lastIndexOf('/') + 1, next.length)
      if (VALUE.indexOf(Tab) !== -1) {
        this.activeTab = Tab
      } else if (VALUE.indexOf(nextTab) !== -1) {
        this.activeTab = nextTab
      }
      this.setRecommendrouter(this.activeTab)
    }
  }
</script>

<style>
  .main {
    height: 3rem;
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .main .mu-tabs {
    background: #fff;
    height: 3rem;
  }

  .main .mu-tab-text {
    color: #000;
  }

  .details {
    position: fixed;
    width: 100%;
    top: 7rem;
    bottom: 0;
    z-index: 100;
  }
</style>
